<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>

  <link rel="stylesheet" href="lib/lib/css/bootstrap.min.css"> 
<style type="text/css">

</style>
</head>
<body>

<div id="app" class="container">


  <div class="panel panel-primary">

    <!-- 面板的heading -->
    <div class="panel-heading">
       <h3 class="panel-title">添加品牌</h3>
    </div>

    <!-- 面板的身体 -->
     <div class="panel-body form-inline" >
        <label>
            型号: <input type="text" class="form-control" v-model="xinghao">
        </label>

        <label class="">
            name: <input type="text" class="form-control" v-model="name" @keyup.enter="add" @keyup.f2="add">
        </label>

        <input type="button" class="btn btn-success  " value="添加" @click="add">
  
         <label class="">
            搜索关键字: <input id="search" type="text" class="form-control" v-model="keywords" v-focus>
        </label> 

        <label class="">
            搜索id(搜id待做): <input type="text" class="form-control" v-model="keyIds">
        </label>

     </div>

  </div>

<!-- -------------------------------------- -->
  <table class="table table-bordered tab-hover tab-striped text-center">
  
  <!-- table的表头 -->
    <thead >
      <tr>
        <th class="text-center">序号</th>
        <th class="text-center">型号</th>
        <th class="text-center">name</th>
        <th class="text-center">ctime</th>
        <th class="text-center">operation</th>
      </tr>
    </thead>

    <!-- table的身体 -->
    <tbody>
        <tr v-for="(item,index) in search(keywords)" :key="item.id">
          <td> {{index+1}} </td>
          <td v-text="item.xinghao"></td>
          <td v-text="item.name"> </td>
          <td> {{ item.ctime | dataFormat }} </td>
          <td> <a href="#" @click.prevent="del(item.id)">删除</a> </td>
        </tr>
    </tbody>

  </table>



</div>
<!-- 形参永远属于undefine  未定义不能 toLowerCase()  -->


<br>
<script src="vue.js"></script>

<script type="text/javascript">

// 创建一个全局的过滤器,进行时间的格式化
    Vue.filter('dataFormat',function(dataStr,pattern=""){
        var dt = new Date(dataStr)

        var y = dt.getFullYear()
        var m = dt.getMonth()+1
        var d = dt.getDate()

        if(pattern.toLowerCase() === 'yyyy--mm--dd'){
           return `${y}-${m}-${d}`
        }else{
          var hh = dt.getHours()
          var mm = dt.getMinutes()
          var ss = dt.getSeconds()
          return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
        }

        // return y + '--' + m + '--' + d
    })

  //自定义键盘值
    Vue.config.keyCodes.f2 = 113 //f2的键盘状态码为113


  //自定指令
    Vue.directive('focus',{
      // 当指令绑定元素时会立即执行这个bind函数，并且只执行一次,el为绑定的元素，
      //  比如说现在v-focus() 方法绑定在搜索框中，所以此时el 就为搜索框
      bind:function(el){
        //el.focus()//绑定了元素，但因为第二个方法的插入数据未成功，所以未能成功获取焦点，（焦点只有插入到Dom元素才有聚集焦点）

      },
      inserted:function(el){//当元素插入到Dom中就会执行这个函数【触发一次】
           el.focus()
      },
      updated:function(){//当VNode更新（Dom节点的更新）的时候会执行updated, 可能会执行对此

      }
    })
    





// 创建一个 app 的实例
var app = new Vue({
  el: '#app',

  data: {
    xinghao:'',
    name:'',
    keywords:'',
    keyIds:'',
  	list:[
        {id:1,xinghao:"i1", name:"奔驰",ctime:new Date() },
        {id:2,xinghao:"b2",name:"宝马",ctime:new Date() },
        {id:3,xinghao:"c3",name:"奥迪",ctime:new Date() },
    ]
  },

  methods:{

    // 在vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，vue就会默认监听到数据的改动，自动把最新的数据应用到页面上
      add(){

        var car = { xinghao:this.xinghao,name:this.name,ctime:new Date()}
        if(this.xinghao.length ==0 && this.name ==0 ){
          alert("id和name都不能为空·")
        }else{
            this.list.push(car)
            this.name=this.xinghao=''
        }
       
      },



      del(id){
/*        // 分析-1：如何通过id找到要删除的索引
        // 分析-2：找到索引了，直接调用数组的 splice 方法
        //  some()---根据指定条件判断，返回true 时， some() 就会被终止，
        this.list.some( (item,i)=>{
          if(item.id == id){
            this.list.splice()

            return true
          }else{

          }
        })
        */
        

        // 方法二
         var index = this.list.findIndex(item=>{
            if(item.id == id){
              return true;
            }
          })
        
        this.list.splice(index,1)
      },




      search(keywords){
/*          var newList =[]

          // 用each（）循环遍历数组
          this.list.forEach(item=>{
              if(item.name.indexOf(keywords) != -1){
                newList.push(item)
              }
          })
          return newList*/

      // 方法二
          return this.list.filter(item=>{ 

            if(item.name.includes(keywords)){
              return item
            }
          })
      },


  }

})


// document.getElementById('search').focus()//自动获取焦点，但Vue不建议用这个方法


</script>

	
</body>
</html>